<template>
  <div class="data-view">
        <el-card>
            <div id="main1"></div>
        </el-card>
        <el-card>
            <div id="main2"></div>
        </el-card>
  </div>
</template>

<script>
export default {
data(){
    return{

    }
},
mounted(){
    // 基于准备好的dom，初始化echarts实例
    var myChart =this.$echarts.init(document.getElementById('main1'))
    myChart.setOption({
         legend: {
            top: 'bottom'
        },
        title:{
            text:"一天的时间分配饼状图",
        },
        tooltip:{},
         toolbox: {
        show: true,
        feature: {
         mark: { show: false },
         dataView: { show: false, readOnly: false },
        restore: { show: false },
         saveAsImage: { show: true}
    }
  }, series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [25, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 60, name: '学习'       },
        { value: 38, name: '睡觉'       },
        { value: 12, name: '吃饭'       },
        { value: 30, name: '刷抖音 '   },
        { value: 20, name: '刷淘宝 '   },
        { value: 28, name: '刷B站'       },
        { value: 24, name: '做饭'       },
        { value: 18, name: '其他'       }
      ]
    }
  ]})

   var myChart1 =this.$echarts.init(document.getElementById('main2'))
    myChart1.setOption({
       title:{
            text:"一天的时间分配柱状图",
        },
         xAxis: {
                type: 'category',
                data: ['学习' ,  
                        '睡觉',   
                        '吃饭' ,  
                        '刷抖音 ',
                        '刷淘宝 ',
                        '刷B站'  ,
                        '做饭'   ,
                        '其他'   ]
  },
    yAxis: {
        type: 'value'
  },
    series: [
         {
          data: [
            60,
            38,
            12,
            30,
            20,
            28,
            24,
            18,],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
    })
}
}
</script>

<style lang="less" scoped>
    .data-view{
        width: 1300px;
        display: flex;
        justify-content: space-between;
        .el-card{
            width: 50%;
            #main1,#main2{
                height: 600px;
                margin: 20px 0px;
            }
            
        }
    }
</style>